<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" label-width="" class="el-form">
      <!-- {{ menuList }} -->
      <!-- {{ menuValue }} 11111111-->
      <!-- 000 -->
      <div class="disp-from-flxe">
        <el-form-item label="">
          <el-select
            @change="danpinChange"
            v-model="menuValue"
            multiple
            filterable
            placeholder="请选择"
            reserve-keyword
            remote
            :remote-method="appRemoteMethod"
          >
            <el-option
              v-for="item in menuArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="set_meal">
        <el-table
          ref="multipleTable"
          :data="tableDataMenuSelect"
          tooltip-effect="dark"
          style="width: 100%"
          max-height="500"
        >
          <el-table-column label="名称">
            <template slot-scope="scope"
              >{{ scope.row.name || scope.row.typeName }}
              <!-- - {{ scope.row.menu_id }} -->
            </template>
          </el-table-column>
          <el-table-column label="单位">
            <template slot-scope="scope">{{ scope.row.brandName }}</template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="scope">{{ scope.row.specName }}</template>
          </el-table-column>
          <el-table-column label="数量" width="220">
            <template slot-scope="scope">
              <el-input-number
                @change="(e) => cheNum(e, scope)"
                v-model="scope.row.num"
                :min="0"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="备注" width="220">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.remark"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('cancel')">关闭</el-button>
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
    </div>
  </div>
</template>
    <script>
import { getFormaMenus, listMenuDose } from "@/api/system/menus";
import { getFormaType, getType } from "@/api/system/type";
import { addDose } from "@/api/system/dose_manage";

export default {
  name: "checMenu",
  props: {
    typeArr: {
      type: Array,
      default: () => [],
    },
    checObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: true,
      menuArr: [],
      menuValue: [], //选项id
      form: {},
      tableDataMenuSelect: [],
      appDan: {
        val: "",
        open: false,
        menuArr: [],
        index: 0,
        data: {
          num: 0,
          typeName: "",
          id: "",
        },
      },
    };
  },
  created() {
    // console.log(this.checObj);
    this.tableDataMenuSelect = this.checObj.tableDataMenuSelect;
    this.menuValue = this.checObj.val;
    this.checObj.tableDataMenuSelect;
    this.menuArr.push(...this.checObj.tableDataMenuSelect);
    console.log(this.menuArr);
    console.log(this.menuValue);
    this.show();
  },
  methods: {
    appChange(e) {
      console.log(e);
      getType(e).then((response) => {
        this.appDan.data = response.data;
        this.appDan.data.num = 0;
        this.appDan.data.typeName = response.data.name;
        this.appDan.data.typeId = response.data.id;
        console.log(this.appDan.data);
      });
    },
    cheNum(e, scope) {
      if (e == undefined) {
        scope.row.num = 0;
      }
    },
    cheNumDan(e) {
      if (e == undefined) {
        this.appDan.val = 0;
      }
    },
    //单品选择确认
    submitDan() {
      this.tableDataMenuSelect[this.appDan.index].details.push(
        this.appDan.data
      );
      this.appDan.open = false;
      this.appDan.data = {};
    },
    //追加单品
    appendFun(item, index) {
      this.appDan.open = true;
      this.appDan.val = "";
      this.appDan.index = index;
    },
    //加载选择菜谱
    show() {
      this.loading = false;
    },
    //选择单品下拉框
    appRemoteMethod(query) {
      console.log(query);
      if (query !== "") {
        getFormaType({
          name: query,
          pageNum: -1,
          pageSize: -1,
        }).then((response) => {
          // console.log(response.rows)
          this.menuArr = response.rows;
        });
      } else {
      }
    },
    // 监听选择单品
    danpinChange(val) {
      console.log(val);
      if (val.length <= 0) {
        this.tableDataMenuSelect = [];
        return;
      }
      if (this.tableDataMenuSelect.length > 0) {
        // 此时说明已经有选中的了
        this.tableDataMenuSelect.some((item, index) => {
          if (item.typeId == undefined) {
            item.typeId = item.id;
          }
          if (!val.includes(item.typeId)) {
            console.log(item);
            this.tableDataMenuSelect.splice(index, 1);
            return true;
          }
        });
      }

      this.menuArr.some((item) => {
        if (item.typeId == undefined) {
          item.typeId = item.id;
        }
        if (item.num == undefined) {
          item.num = 0;
        }
        console.log(item);
        let list = val.filter((e) => e == item.typeId);

        let list2 = this.tableDataMenuSelect.filter(
          (e) => e.typeId == item.typeId
        );
        if (list.length > 0 && list2 <= 0) {
          this.tableDataMenuSelect.push(item);
        }
      });
    },
    submitFileForm() {
      if (this.tableDataMenuSelect.length < 1) {
        this.$modal.msg("请选择菜谱");
        return;
      }
      var data = {
        weekStart: this.checObj.weekStart,
        weekEnd: this.checObj.weekEnd,
        week: this.checObj.week,
        weekTag: this.checObj.weekTag,
        params: {
          doseDetails: [],
        },
      };
      var arr = [];
      this.tableDataMenuSelect.forEach((item, index) => {
        item.time = this.checObj.type;
        arr.push(item);
        // item.details.forEach((item2, index2) => {
        //   item2.menuId = item.id;
        //   item2.time = this.checObj.type;
        //   arr.push(item2);
        // });
      });
      data.params.doseDetails = arr;
      console.log(data);
      // this.loading = true
      //   return;
      addDose(data).then((response) => {
        console.log(response);
        // this.loading = false
        this.$emit("submitFileForm");
      });
    },
  },
};
</script>
            
    
<style scoped>
.app-container {
  padding: 0;
}

.box-card-taocan {
  margin-bottom: 20px;
}
.el-dialog__body {
  height: calc(100% - 80px);
}
</style>